<template>
    <div class="logins">
        <div class="login">
            <!--<van-nav-bar  :right-text="$t('info.change')" @click-right="changeLang"/>-->
            <div class="loginMain">
                <div class="loginPwd" v-if="showLogin">
                    <img :src="logo" alt="">
                    <van-row class="title margin10" type="flex" justify="space-between">
                        <van-col><h3>{{$t('common.password_login')}}</h3></van-col>
                         <van-col @click.native="changeLogin">{{$t('common.code_login')}}</van-col>
                        <!-- <van-col @click.native="go_register">{{$t('common.to_register')}}</van-col> -->
                    </van-row>
                    <van-cell-group>
                        <van-field v-model="login.phone" :placeholder="$t('common.account_remind')" />
                        <van-field v-model="login.pwd" :placeholder="$t('common.password_remind')" type="password"/>
                    </van-cell-group>
                    <button class="btn" @click="Gologin">{{$t('common.login_button')}}</button>
                    <button class="btn org" @click="go_register">{{$t('common.to_register')}}</button>
                    <!-- <van-row type="flex" justify="space-between">
                        <van-col @click.native="changeLogin"></van-col>
                        <van-col class="right" @click.native="forgetPwd">{{$t('common.forget_password')}}</van-col>
                    </van-row> -->
                    <div class="fgtpsw">
                        <div class="underl" @click="forgetPwd">{{$t('common.forget_password')}}</div>
                    </div>
                </div>
                <div class="loginPwd" v-else>
                    <img :src="logo" alt="">
                    <van-row class="title margin0" type="flex" justify="space-between">
                        <van-col><h3>{{$t('common.code_login')}}</h3></van-col>
                        <van-col @click.native="changeLogin">{{$t('common.password_login')}}</van-col>
                        <!-- <van-col @click.native="go_register">{{$t('common.to_register')}}</van-col> -->
                    </van-row>
                    <van-cell-group>
                        <van-field v-model="login.phone" :placeholder="$t('common.account_remind')">
                            <van-button slot="button" size="small" type="info" :disabled="disBtn" @click="sendCode">{{sec}}</van-button>
                        </van-field>
                        <van-field v-model="login.code" maxlength="6" :placeholder="$t('common.code_remind')" />
                    </van-cell-group>
                    <button class="btn" @click="Gologin">{{$t('common.login_button')}}</button>
                    <button class="btn org" @click="go_register">{{$t('common.to_register')}}</button>
                    <!-- <van-row type="flex" justify="space-between">
                        <van-col @click.native="changeLogin">{{$t('common.password_login')}}</van-col>
                    </van-row> -->
                </div>
            </div>
            <loading v-if="loadingShow"></loading>
        </div>
    </div>
</template>

<script>
    import {mapMutations,mapGetters} from 'vuex'
    export default {
        data(){
            return{
                login:{
                    phone:'',
                    pwd:'',
                    code:'',
                    mail:''
                },
                showLogin:true,
                sec:this.$t('common.get_code'),
                disBtn:false,
                timer:null,
                loadingShow:false,
                logo:require('../assets/AATlogo.png'),
                language:''
            }
        },
        methods:{
            ...mapMutations({
                setToken: 'SET_TOKEN',
                setUser:'SET_USER'
            }),
            changeLang(){
                let area = this.$i18n.locale
                if(area === 'en'){
                    this.$i18n.locale = 'zh'
                }else{
                    this.$i18n.locale = 'en'
                }
            },
            changeLogin(){
                this.showLogin = !this.showLogin
                Object.keys(this.login).map(key => this.login[key] = '');
            },
            go_register(){
                this.$router.push('/register')
            },
            forgetPwd(){
                this.$router.push('/forget')
            },
            sendCode(){
                if(!this.login.phone){
                    this.$toast(this.$t('common.account_remind'))
                    return
                }
                if(this.login.phone.indexOf('@') != '-1'){
                    this.sendMailCode()
                }else{
                    this.sendPhoneCode()
                }
            },
            sendPhoneCode(){
                const TIME_COUNT = 60;
                let param = {
                    type:1,
                    username:this.login.phone
                }
                this.loadingShow = true
                this.$api.post('user/slcode',param,this)
                    .then(res =>{
                        this.disBtn = true
                        this.loadingShow = false
                        this.$toast(res.message)
                        if(!this.timer){
                            this.sec = TIME_COUNT
                            this.timer = setInterval(()=>{
                                if(this.sec>0 && this.sec<= TIME_COUNT){
                                    this.sec--
                                }else{
                                    this.sec = this.$t('common.get_code')
                                    clearInterval(this.timer)
                                    this.timer = null
                                    this.disBtn = false
                                }
                            },1000)
                        }
                    })
            },
            sendMailCode(){
                const TIME_COUNT = 60;
                let param = {
                    type:2,
                    username:this.login.phone
                }
                this.loadingShow = true
                this.$api.post('user/slcode',param,this)
                    .then(res =>{
                        this.loadingShow = false
                        this.disBtn = true
                        this.$toast(res.message)
                        if(!this.timer){
                            this.sec = TIME_COUNT
                            this.timer = setInterval(()=>{
                                if(this.sec>0 && this.sec<= TIME_COUNT){
                                    this.sec--
                                }else{
                                    this.sec = this.$t('common.get_code')
                                    clearInterval(this.timer)
                                    this.timer = null
                                    this.disBtn = false
                                }
                            },1000)
                        }
                    })
            },
            Gologin(){
                if(this.showLogin){
                    if(!this.login.phone){
                        this.$toast(this.$t('common.account_remind'))
                        return
                    }
                    if(!this.login.pwd){
                        this.$toast(this.$t('common.password_remind'))
                        return
                    }
                    let param = {
                        type:1,
                        username:this.login.phone,
                        password:this.login.pwd
                    }

                    this.$api.post('user/login',param,this)
                        .then(res =>{
                            this.setVuex(res.detail,res.message)
                        })
                }else{
                    if(!this.login.phone){
                        this.$toast(this.$t('common.account_remind'))
                        return
                    }
                    if(!this.login.code){
                        this.$toast(this.$t('common.code_remind'))
                        return
                    }
                    let param = {
                        type:2,
                        username:this.login.phone,
                        code:this.login.code
                    }
                    this.$api.post('user/login',param,this)
                        .then(res =>{
                            this.setVuex(res.data,res.message)
                        })
                }
            },
            setVuex(data,msg){
                this.setToken(data.token_id)
                this.setUser({
                    country_code: data.countrycode,
                    email:data.email,
                    nameAuth:data.is_auth,
                    payPass:data.isSetPayPass,
                    phone:data.phone,
                    uid:data.id
                })
                localStorage.user = JSON.stringify(this.user);
                localStorage.token = data.token_id
                Object.keys(this.login).map(key => this.login[key] = '');
                this.$toast.loading({
                    mask: true,
                    message: msg,
                    onClose:()=>{
                        this.$router.push('/home')
                    }
                })
            },
        },
        computed:{
            ...mapGetters([
                'user',
                'token'
            ]),
        },
        created() {
        },
        mounted() {

        },
    }
</script>

<style lang="stylus" scoped>
    font = #f6543e
    [class*=van-hairline]::after
        border none
    .van-cell:not(:last-child)::after
        border-bottom none
    .logins
        width 100%
        height 100%
        .flag
            width 50px
            position absolute
            right 25px
            top 25px

    .login
        position absolute
        width 100%
        
    .loginMain
        width 84%
        margin 0 auto
        color font
        position relative
        padding-bottom 40px
        img
            width 240px
            display block
            margin 0 auto
            margin-top 30px
        .title
            color font
            align-items baseline
            margin-top 20px
            h3
                font-weight 500
                color #463a0e
        .van-cell-group
            margin-top 20px
            background none
            .van-cell
                border: 1px solid rgba(222,221,221,0.6);
                border-radius: 25px;
                margin-bottom: 20px;
                position: relative;
                display: -webkit-box;
                display: -webkit-flex;
                display: flex;
                box-sizing: border-box;
                width: 100%;
                padding: 10px 15px;
                overflow: hidden;
                color: #323233;
                font-size: 14px;
                line-height: 24px;
                background-color: #fff;
                .van-button--info
                    background none
                    border none
                    color font

        .btn
            margin-bottom 15px
            border-radius: 25px;
        .van-row
            margin-top 20px
        .go_register
            color #000
            margin-top 215px
        .margin10
            margin-top 20px
        .org
            background: linear-gradient(180deg, #ff7541, #f6543e);;
        .right
            float right 
            margin-right 10px
            text-decoration underline
        .fgtpsw
            width 100%
            text-align center
            .underl
                  text-decoration underline
</style>